.container {
    // padding-bottom: 200rpx;
    background: #FAFAFC;
    box-sizing: border-box;
    // min-height: 100vh;
}

.card-clamps-list {
    @include padding-box(30rpx 30rpx);
}

.card-clamps-i {
    position: relative;
    width: 100%;
    height: 340rpx;
    margin: 30rpx 0;

    .i-info {
        position: relative;
        z-index: 1;
        height: 340rpx;
        border-radius: 16rpx;
    }

    .pay-bottom {
        @include padding-box(30rpx 30rpx);
    }

    .pay-balance-introduce {
        color: #AF7541;
        margin-right: 16rpx;
    }

    .pay-balance-num {
        color: #202536;
        font-size: 32rpx;
        display: flex;
        align-items: center;

        .num {
            margin-left: 9rpx;
        }
    }

    .pay-balance {
        display: flex;
        align-items: center;
    }

    .pay-progress {
        width: 202rpx;
    }

    .i-info-head {
        @include padding-box(14rpx 40rpx);
        // border-radius: 16rpx;
        // background: linear-gradient(124deg, rgba(77, 87, 117, 0) 0%, rgba(37, 44, 65, 0.51) 100%);
    }

    .head-left {
        display: flex;
        align-items: center;
    }

    .head-left-title {
        color: #FFFFFF;
        margin-left: 13rpx;
    }

    .head-left-img {
        width: 150rpx;
        height: 40rpx;
    }

    .head-right {
        display: flex;
        align-items: center;
    }

    .head-right-recharge {
        margin-left: 8rpx;
        color: #FFC768;
    }

    .i-info-body {
        color: #ffffff;
        @include padding-box(15rpx 40rpx 5rpx 40rpx);
    }

    .i-info-body-active {
        @include padding-box(50rpx 40rpx 0 40rpx);
    }

    .body-title {
        font-size: 26rpx;
    }

    .body-balance {
        display: flex;
        margin-top: 5rpx;
        color: #FFC768;
        font-size: 70rpx;
        align-items: baseline;
    }

    .body-balance-white {
        color: #FFFFFF;
    }

    .body-balance-unit {
        font-size: 34rpx;
    }

    .recharge:not([size="mini"]) {
        width: 158rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FF7E68;
        border-radius: 30px;
        color: #FFFFFF;
        font-size: 28rpx;
        margin: 0;
        font-weight: 400;
        // box-shadow: 0rpx 6rpx 10rpx rgba(255, 126, 104, 1);
    }

    .recharge-bg-white:not([size="mini"]) {
        background: #FFFFFF;
    }

    .recharge-color-green:not([size="mini"]) {
        color: #00D679;
    }

    .recharge-color-yellow:not([size="mini"]) {
        color: #FFC768;
    }

    .recharge-color-blue:not([size="mini"]) {
        color: #6699FE;
    }

    .recharge-color-golden:not([size="mini"]) {
        color: #A7774A;
    }

    .i-info-foot {
        @include padding-box(8rpx 40rpx);
    }

    .foot-tips-box {
        position: relative;

        .box-arrow {
            position: absolute;
            width: 0;
            height: 0;
            border-left: 10rpx solid transparent;
            border-right: 10rpx solid transparent;
            border-bottom: 10rpx solid #202536;
            left: 80rpx;
            top: -10rpx;
        }

        .box-body {
            position: absolute;
            width: 100%;
            height: 110rpx;
            background: #202536;
            border-radius: 18rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #ffffff;
            @include padding-box(10rpx 64rpx);
        }

        .box-body-money-active {
            position: relative;
        }

        .box-body-arrow {
            position: absolute;
            width: 0;
            height: 0;
            border-right: 10rpx solid #202536;
            border-bottom: 10rpx solid transparent;
            border-top: 10rpx solid transparent;
            top: 1rpx;
            right: 0rpx;
            opacity: 0.8;
        }

        .box-body-describe {
            position: absolute;
            width: 343rpx;
            height: 103rpx;
            background: #202536;
            opacity: 0.8;
            top: -45rpx;
            right: -343rpx;
            border-radius: 18rpx;
            @include padding-box(18rpx 21rpx);
            color: #ffffff;
            font-size: 28rpx;
        }

        .box-body-slogan {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 9rpx;
            display: flex;
            align-items: center;
        }

        .box-body-tips {
            margin-left: 10rpx;
            color: #ffffff;
            width: 27rpx;
            height: 25rpx;
            text-align: center;
            line-height: 25rpx;
            background: #8F919A;
            border-radius: 50%;
            font-size: 18rpx;
        }

        .box-body-num {
            color: #FFFFFF;
            font-size: 32rpx;

            &::first-letter {
                font-size: 24rpx;
                margin-right: 10rpx;
            }
        }

        .box-body-ymbol {
            color: #FFFFFF;
            font-size: 38rpx;
        }
    }

    .foot-block-title {
        font-size: 26rpx;
    }

    .foot-block-name {
        color: #FFFFFF;
    }

    .foot-record {
        display: flex;
        align-items: center;
        color: #ffffff;
    }

    .golden {
        color: #A7774A;
    }
}

.card-clamps-i-active {
    background: #FFF3E3;
    height: 430rpx;
    border-radius: 18rpx;
}

.popup {
    .describe {
        @include padding-box(2rpx 69rpx);
        font-size: 28rpx;
        color: #9497B1;
        margin-bottom: 40rpx;

        .name {
            text-align: center;
        }
    }

    .long-btn-know:not([size="mini"]) {
        width: 400rpx;
        height: 94rpx;
        display: flex;
        background: linear-gradient(90deg, #00EDB1 0%, #00D679 100%);
        align-items: center;
        justify-content: center;
        border-radius: 30px;
        color: #FFFFFF;
        font-size: 36rpx;
        margin: 0;
        font-weight: 400;
    }
}

.bg-img {
    filter: grayscale(1);
}

.ash-img {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0px 12px 14px 0px rgba(208, 210, 209, 0.5);
    color: #BABABA !important;
    padding: 8rpx 0rpx;
}

.recharge-active {
    padding: 8rpx 0rpx;
}


/* pages/vip/vip.wxss */
page {
    width: 100%;
    height: 100%;
    background-color: #fafafc;
}

.pageBox {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #1a1728;

}



.vipImg {
    padding: 68rpx 30rpx 60rpx;
    box-sizing: border-box;
    width: 700rpx;
    height: 262rpx;
    position: relative;
    border-radius: 16rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


.vipImg1 {
    height: 270rpx;
    background-image: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager9f643caa-d04f-43b0-a25e-86ebe4672dce.png');
    background-size: 100% 100%;
}

.vipImg2 {
    background-image: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager2d6e02ca-9946-4c6b-bcd5-1f1d39e28197.png');
}

.vipImg3 {
    background-image: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager54ed90ce-169f-4987-85f5-20def7923b79.png');
}

.vipImg4 {
    background-image: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager0ac933a2-33f4-430d-8149-94f5da2aab89.png');
}

.vipImg5 {
    background-image: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerd396e9d5-352f-4a9d-aca7-f083dbf73c3e.png');
}

.vipImg11 {
    background-image: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerad31f9ff-260f-41b0-8294-2d252727b4f2.png');
}

.vipImg22 {
    background-image: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager8917b143-d875-4bad-af16-9441d5ccf300.png');
}

.vipImg33 {
    background-image: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager13825221-dd0c-4901-980f-bf925b543a11.png');
}

.vipImg44 {
    background-image: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager267ad78b-4751-4436-8450-32f2d78b4b40.png');
}

.vipImg55 {
    background-image: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager49263ef2-1813-41ea-974a-952bed9b21f6.png');
}

.tab-content,
.bgImg {
    width: 100%;
    height: 100%;
}

.scoll-h {
    height: 100%;
}

.scrollBox {
    /* background-color: pink; */
    height: 380rpx;
    display: flex;
    flex-wrap: nowrap;
    width: 400%;
}

.vipCurrImg {
    position: absolute;
    top: 25%;
    left: 48%;
    width: 104rpx;
    height: 40rpx;
}

.li {

    width: 100%;
    height: 90%;

    .title {
        color: #FFFFFF;
        font-size: 26rpx;
        margin-bottom: 36rpx;
    }

    .ed {
        border-radius: 4rpx;
        background-color: rgba(255, 255, 255, .3);
        padding: 4rpx 8rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        font-weight: 700;
        height: 26rpx;
        line-height: 26rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 36rpx;
    }

    .price {
        color: #FFFFFF;
        font-size: 60rpx;
        font-weight: 600;
    }

    .bgblue {
        background-color: #1673E4;
    }

    .bgdark {
        background-color: #585755;
    }

    .bgorange {
        background-color: #E57616;
    }

    .overtime {
        position: absolute;
        top: 10rpx;
        right: 20rpx;
        color: #20AA55;
        font-size: 24rpx;
    }

    .tag {
        width: 110rpx;
        height: 48rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0rpx;
        color: #FFFFFF;
        font-size: 24rpx;
        border-radius: 0px 16rpx 0px 16rpx;
    }
}

.aa {
    margin-top: -120rpx;
}

.swipBottom {
    padding: 45rpx 20rpx 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 700rpx;
    background-color: #32384B;
    height: 146rpx;
    border-radius: 16rpx;
    margin-top: -40rpx;
}

.box-body {
    position: absolute;
    width: 100%;
    height: 110rpx;
    background: #202536;
    border-radius: 18rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    @include padding-box(10rpx 64rpx);
}

.box-body-money-active {
    position: relative;
}

.box-body-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-right: 10rpx solid #202536;
    border-bottom: 10rpx solid transparent;
    border-top: 10rpx solid transparent;
    top: 1rpx;
    right: 0rpx;
    opacity: 0.8;
}

.box-body-describe {
    position: absolute;
    width: 343rpx;
    height: 103rpx;
    background: #202536;
    opacity: 0.8;
    top: -45rpx;
    right: -343rpx;
    border-radius: 18rpx;
    @include padding-box(18rpx 21rpx);
    color: #ffffff;
    font-size: 28rpx;
}

.box-body-slogan {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 9rpx;
    display: flex;
    align-items: center;
}

.box-body-tips {
    margin-left: 10rpx;
    color: #ffffff;
    width: 27rpx;
    height: 25rpx;
    text-align: center;
    line-height: 25rpx;
    background: #8F919A;
    border-radius: 50%;
    font-size: 18rpx;
}

.box-body-num {
    font-size: 32rpx;
    color: #FFFFFF;

    &::first-letter {
        font-size: 24rpx;
        margin-right: 10rpx;
    }
}

.box-body-ymbol {
    color: #FFFFFF;
    font-size: 38rpx;
}

.bottomContent {
    width: 100%;
    box-sizing: border-box;
    padding: 0 24rpx;

    .box {
        width: 100%;

        .reecharge {
            margin-bottom: 26rpx;
            width: 100%;
            // height: 272rpx;
            box-sizing: border-box;
            padding: 24rpx 28rpx;
            border-radius: 16rpx;
            background: linear-gradient(68deg, #F9DFBD 0%, #FFB7A6 100%);

            .typebox {
                width: 100%;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 16rpx;

                .itemc {
                    padding: 28rpx;
                    background-color: #FFFFFF;
                    border-radius: 16rpx;
                    min-height: 166rpx;
                    box-sizing: border-box;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-shrink: 0;
                    position: relative;

                    .text {
                        position: relative;
                        z-index: 99;
                        font-size: 30rpx;
                        color: #282F49;
                    }

                    .btn {
                        width: 160rpx;
                        height: 52rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 28rpx;
                        color: #FADBBB;
                        background-color: #32384B;
                        border-radius: 30rpx;
                    }

                    .img {
                        width: 120rpx;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                }

                .item {
                    padding: 28rpx;
                    background-color: #FFFFFF;
                    border-radius: 16rpx;
                    min-height: 166rpx;
                    box-sizing: border-box;
                    flex: 1;
                    flex-shrink: 0;
                    position: relative;

                    .text {
                        font-size: 30rpx;
                        color: #282F49;
                        margin-bottom: 28rpx;
                    }

                    .btn {
                        width: 160rpx;
                        height: 52rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 28rpx;
                        color: #FADBBB;
                        background-color: #32384B;
                        border-radius: 30rpx;
                    }

                    .img {
                        width: 80rpx;
                        height: 94rpx;
                        position: absolute;
                        right: 0;
                        top: 43rpx;
                    }
                }
            }

            .title {
                font-weight: 600;
                font-size: 32rpx;
                color: #202536;
                margin-bottom: 24rpx;
            }
        }
    }
}

.rechargeListbox {
    width: 100%;
    box-sizing: border-box;

    .title {
        color: #121212;
        font-size: 36rpx;
        margin-bottom: 28rpx;
    }

    .listinfo {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24rpx;

        .item {
            width: 100%;
            background-color: #FFFFFF;
            border-radius: 8rpx;
            padding: 30rpx 28rpx;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 24rpx;

            .top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: 600;
                color: #202536;
                font-size: 32rpx;
            }

            .bottom {
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #9497B1;
            }
        }
    }
}

.waiting {
    color: $red;
}

.success {
    color: $green;
}


.bacimage {
    width: 100%;
    margin-bottom: 200rpx;
}

.footerbox {
    width: 100vw;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 24rpx 30rpx 90rpx;

    .double {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .btn {
            width: 392rpx;
        }
    }

    .cbtn {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 4rpx;

        .img {
            width: 36rpx;
            height: 36rpx;
        }
    }

    .btn {
        height: 88rpx;
        border-radius: 44rpx;
        background-color: #00D679;
        color: #ffffff;
        font-size: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


.mypopup .weui-half-screen-dialog__ft {
    display: none !important;
}

.mypopup .weui-half-screen-dialog__hd {
    min-height: 10rpx;
}

.mypopup .weui-half-screen-dialog__bd {
    padding-bottom: 50rpx;
}

.mypopup {
    padding-top: 42rpx;
    background: linear-gradient(180deg, #E4FFF3 0%, #FFFFFF 90%);

    .desc {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 24rpx;

        .top-text {
            color: #00D679;
            font-size: 40rpx;
            margin-bottom: 46rpx;
        }

        .bottom-text {
            color: #202536;
            font-size: 28rpx;
            margin-top: 32rpx;
        }

        .imgbox {
            background-color: #FFFFFF;
            width: 440rpx;
            height: 440rpx;
            padding: 28rpx;
            box-sizing: border-box;
            border-radius: 16rpx;

            .img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .closeimg {
            width: 24rpx;
            height: 24rpx;
        }

        .f1 {
            flex: 1;
            flex-shrink: 0;
            text-align: center;
        }

        .imgbox {
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }
}